<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
      h1 {
        margin: 20px;
        text-align: center;
      }
      h4 {
        margin: 20px 0;
      }
      .card {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>采购小助手</h1>
      <form>
        <div class="form-group">
          <label for="name">物资名：</label>
          <input type="text" class="form-control" id="name" />
        </div>
        <div class="form-group">
          <label for="price">单价：</label>
          <input type="number" class="form-control" id="price" />
        </div>
        <div class="form-group">
          <label for="amount">数量：</label>
          <input type="number" class="form-control" id="amount" />
        </div>
        <button type="submit" class="btn btn-primary" id="submit">记账</button>
      </form>
      <h4>历史采购</h4>
      <div class="history-list" id="history-list">
       
      </div>
    </div>
  </body>
  <script>
    $("#submit").click(function (e) {
      e.preventDefault();
      let today = new Date();
      let name = $("#name").val();
      let price = $("#price").val();
      let amount = $("#amount").val();
      //补充完成以下代码，实现card效果
      let str = ` <div class="card">
          <div class="card-body">
            <h5 class="card-title">2023年3月10日</h5>
            <p class="card-text">物资：${name}，单价：${price}，数量：${amount}</p>
            <p class="card-text">共计${price*amount}元</p>
          </div>
        </div>`
      $("#history-list").prepend($(str));
      $("form")[0].reset();
    });
  </script>
</html>
